<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div id="content" role="main">
	<!-- Heading _____________________________________________-->
	<h1>Documentation</h1>

	<!-- Breadcrumbs _____________________________________________-->
	<p itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
		id="breadcrumbs">
		<a href="/" rel="home" itemprop="url"><span itemprop="title">Home</span></a>
		<i class="icon-chevron-right"></i> Documentation
	</p>
	<hr />

	<!-- WYSIWYG Content _____________________________________________-->
	<p class="big">
		<strong>Welcome</strong> to the inHarmony documentation. This guide
		was created for everyone that wants to create their own website using
		this template and is not that familiar with coding. All steps are
		thoroughly explained, so that using this template becomes as easy as
		it can get!
	</p>

	<br />
	<div class="vertical-tabs tabs-wrapper">
		<ul class="tabs">
			<li><a href="#" id="tab1">Getting started</a></li>
			<li><a href="#" id="tab2">Using HTML elements &amp;
					troubleshooting bad styling</a></li>
			<li><a href="#" id="tab3">How to change the logo</a></li>
			<li><a href="#" id="tab4">Change the address and social
					links</a></li>
			<li><a href="#" id="tab5">Setting up Google Custom Search
					&amp; Google Analytics</a></li>
			<li><a href="#" id="tab6">Setting up your homepage: slider</a></li>
			<li><a href="#" id="tab7">Setting up your homepage: content
					and widgets</a></li>
			<li><a href="#" id="tab8">Columns in footer</a></li>
			<li><a href="#" id="tab9">Setting up layouts and sidebar for
					pages</a></li>
			<li><a href="#" id="tab10">Setting up portfolio</a></li>
			<li><a href="#" id="tab11">Setting up blog pages</a></li>
			<li><a href="#" id="tab12">Setting up contact page, map and
					contact form</a></li>
			<li><a href="#" id="tab13">Creating your own color scheme</a></li>
		</ul>
		<div class="tab tab1">
			<h3>Get Started with the inHarmony Template</h3>
			<p>
				This template is very easy to use, it has comments all over its
				files and clearly visible and understandable element structure.
				First, keep the copy of the template in a folder and copy the whole
				folder to your server or test folder on your computer. Make sure the
				index.html file is in the root of your server. This template uses <strong>PHP
					for a contact form</strong>, so make sure that your server has PHP installed
				and enabled for you. Other than that, it is pure HTML / CSS /
				Javascript.
			</p>
		</div>
		<div class="tab tab2">
			<h3>Using HTML elements</h3>
			<p>
				See the elements structure in this image: <img src="" alt=""
					class="" />
			</p>
			<p>Every page in this template has HTML elements that you can use
				anywhere. When copying, make sure, you kept all the element classes
				and/or IDs (.pricing for pricing table for example), otherwise the
				styling of your element won't look right.</p>
			<p>
				If something goes wrong, first step is to copy the whole code of
				your newly created html page and paste it <a
					href="http://validator.w3.org/#validate_by_input" target="_blank">in
					the validator</a>. This will tell you, wheter you have an unclosed tag
				somewhere. If everything is OK from the validator but you still
				experience bad styling on your element, compare it tag by tag, class
				by class, with the original code.
			</p>
			<p class="notice success">
				<strong>Tip:</strong> Use Google Chrome browser, right-click with
				your mouse the bad element and select "Inspect Element". This opens
				the HTML and CSS doctor in the browser, which can tremendously help
				you in searching for a cause of trouble.
			</p>
		</div>
		<div class="tab tab3">
			<h3>How to change the logo</h3>
			<p>
				The logo of the template has an image, text headline and
				sub-headline. The image logo should be 130px in height maximum.
				Replace the <strong>logo.gif</strong> file in /imgs folder.
			</p>
			<p>If you want to change height of the logo, open master.css file
				in /css folder, locate line for #logo and change the height in
				pixels.</p>
			<p>If you don't want the text headlines, remove them from html:</p>
			<div class="greybox">
				<pre>
&lt;div id="logo"&gt;
	&lt;h1&gt;
		&lt;a href="/" rel="home"&gt;&lt;img src="imgs/logo.gif" alt="inHarmony Logo" /&gt;&lt;/a&gt;
		REMOVE FROM HERE
		&lt;a href="/" rel="home"&gt;inHarmony&lt;span class="blue"&gt;.&lt;/span&gt;&lt;/a&gt; &lt;br /&gt;
		&lt;span class="subtitle"&gt;Just another HTML template&lt;/span&gt;
		TO HERE
	&lt;/h1&gt;
&lt;/div&gt;</pre>
			</div>
			<p>
				The <strong class="green">&lt;span
					class="blue"&gt;.&lt;/span&gt;</strong> is just a design touch, you can
				remove it too if you like.
			</p>
		</div>
		<div class="tab tab4">
			<h3>Change the address and social links</h3>
			<p>
				The <strong class="green">#address-block</strong> in header is a
				microdata rich snippet, which helps your business to be better seen
				and previewed by search engines, especially Google, in search
				results. Fill out the fields of the address, don't forget the <strong
					class="green">mailto:</strong> parameter (or remove the a link for
				a span if you don't want the email address to be clickable).
			</p>
			<p>
				Below the address are the social links. The icons are Font Awesome
				icons and you have more of them to your disposal - they are
				commented, choose the ones useful for you. Fill out the href links
				to your social profiles, with <strong class="green">target="_blank"</strong>,
				it all opens in a new window.
			</p>
			<p>
				You can change the colors and size of the social icons in the
				master.css file. Locate <strong class="green">#social-block
					a i</strong>,
			</p>
		</div>
		<div class="tab tab5">
			<h3>Setting up Google Custom Search &amp; Google Analytics</h3>
			<p>
				You'll need a gmail account for all of this. For Google CSE Search,
				go to <a href="https://www.google.com/cse/" target="_blank">https://www.google.com/cse/</a>,
				add new custom search, use the domain name of your website and <strong>save
					the ID</strong> (of your newly created custom search). Go to the .html file
				(all of them), locate this line and put the ID there:
			</p>
			<div class="greybox">
				<pre>var cx = '017683756184911932766:rvnzs1j9m1g';</pre>
			</div>
			<p>
				For Google Analytics, go to <a
					href="https://www.google.com/analytics/" target="_blank">https://www.google.com/analytics/</a>,
				set up the Analytics for your website and save its UX- number. Go to
				the .html file (all of them) at the bottom and put the number there:
			</p>
			<div class="greybox">
				<pre>_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);</pre>
			</div>
		</div>
		<div class="tab tab6">
			<h3>Setting up your homepage: slider</h3>
			<p>
				The <strong class="green">#slider</strong> is operated by a <a
					href="http://jquery.malsup.com/cycle/" target="_blank">jQuery
					Cycle Plugin by malsup</a>. Every <strong class="green">.slide</strong>
				has 3 layers: the background image layer (the main one), the
				semi-transparent image layer over it (the girl on the first slider
				for example) and the text box with paragraphs:
			</p>
			<ul>
				<li><span class="bold green">.slide-back</span> (jpg image)</li>
				<li><span class="bold green">.slide-image</span> (png image)</li>
				<li><span class="bold green">.slide-text</span> (paragraphs)</li>
			</ul>
			<p>
				You will need to have at least one jpg image (.slide-back) to have
				the slider functioning. This image should be <strong>1065 x
					450 px</strong>.
			</p>
			<p>The image on top of the background image is a png image with
				transparency.</p>
			<p>The paragraphs in .slide-text are all animated. For best
				experience, have 4 of them at most.</p>
			<p class="notice success">
				<strong>Tip:</strong> If you want to have a button there, make sure
				the paragraph has an <em>inline</em> class, like so:
			</p>
			<div class="greybox">
				<pre>&lt;p class="inline"&gt;&lt;a href="#" class="button"&gt;Buy it&lt;/a&gt;&lt;/p&gt;</pre>
			</div>
			<p>The script operating the cycle slider can be found at the
				bottom of index.html file. Here are some parameters you can change:
			</p>
			<ul class="">
				<li><strong class="green">fx</strong> - transition effect. Best
					is <em>fade</em>. Others can be <a
					href="http://jquery.malsup.com/cycle/browser.html" target="_blank">found
						here</a>.</li>
				<li><strong class="green">speed</strong> - how long does it
					take for the the background to fade out (in miliseconds)</li>
				<li><strong class="green">timeout</strong> - how long does the
					slide stays visible (in miliseconds)</li>
			</ul>
			<p>
				For professionals, here are <a
					href="http://jquery.malsup.com/cycle/options/" target="_blank">all
					options for the slider</a>.
			</p>
			<p>
				The subtle animation of paragraphs is handled in <em>before</em> and
				<em>after</em> functions.
			</p>
			<p>You can have as many slides as you wish.</p>
			<p class="notice error">
				<strong>Warning:</strong> If you only have one .slide, the plugin
				will not work and you'll see blank space.
			</p>
		</div>
		<div class="tab tab7">
			<h3>Setting up your homepage: content and widgets</h3>
			<p>Homepage comprises of these content components:</p>
			<ul>
				<li><span class="bold green">#slider</span> (cycle slider)</li>
				<li><span class="bold green">#features</span> (6 icons)</li>
				<li><span class="bold green">#slogan</span> (grey box with
					text)</li>
				<li><span class="bold green">#latest-projects</span> (images in
					carousel)</li>
				<li><span class="bold green">#recent-news</span> (vertical
					carousel)</li>
				<li><span class="bold green">#testimonials</span> (quotes in a
					cycle)</li>
				<li><span class="bold green">#clients</span> (client logos in
					carousel)</li>
			</ul>
			<p>Plugins operating the components can be found at the bottom of
				index.html file:</p>
			<ul>
				<li><span class="bold green">#slider</span> (operated by Cycle)</li>
				<li><span class="bold green">#latest-projects</span> (operated
					by jCarousel)</li>
				<li><span class="bold green">#recent-news</span> (operated by
					jCarousel)</li>
				<li><span class="bold green">#testimonials</span> (ooperated by
					Cycle)</li>
				<li><span class="bold green">#clients</span> (operated by
					jCarousel)</li>
			</ul>
			<h4>Slider</h4>
			<p>This component is explained by detail in the previous section
				of this documentation.</p>
			<h4>Features - 6 icons</h4>
			<p>
				Every <strong class="green">.feature</strong> takes up 1/6 of the
				content width (16.67%). If you want to have less features, change
				the percentage in css/master.css (locate <em>.feature</em> line).
				Icons in the features are Font Awesome icons - take a look at <a
					href="http://fortawesome.github.io/Font-Awesome/cheatsheet/"
					target="_blank">350+ Font Awesome icons</a> - you can have any icon
				there! Just change the class in the i tag:
			</p>
			<div class="greybox">
				<pre>&lt;i class="icon-ANYTHING"&gt;&lt;/i&gt;</pre>
			</div>
			<p>You can control the color and size of the icons in the css
				file.</p>
			<h4>Slogan</h4>
			<p>Here you can have anything, it is just a grey box with
				centered text.</p>
			<h4>Latest Projects</h4>
			<p>
				This is a <a href="http://sorgalla.com/jcarousel/" target="_blank">jCarousel</a>
				carousel. It is composed by <strong class="green">.carousel4
					li </strong> items, each having the popup image, headline and brief
				description. The popup is controlled with the <a
					href="http://dimsemenov.com/plugins/magnific-popup/‎"
					target="_blank">Magnific Popup plugin</a>. Every popup image is
				encapsulated in a link with a <strong class="green">.popup</strong>
				class. Here is the code:
			</p>
			<div class="greybox">
				<pre>&lt;a class="popup" href="LARGE IMAGE"&gt;&lt;img src="THUMBNAIL" alt="DESCRIPTION" /&gt;&lt;/a&gt;</pre>
			</div>
			<p>
				Each project is 264px wide. Make sure the thumbnail image is at
				least <strong>264px</strong> in width (ideally 480px in width, but
				the size can be anything). Also, the thumbnails should have the same
				height, otherwise you end up with an odd-looking carousel.
			</p>
			<p>
				If you choose to have <strong>a lot</strong> of portfolio pieces in
				the carousel, go to css/master.css file, locate <strong
					class="green">ul.carousel4</strong> line and make sure it's width
				is sufficient (right now it's 3000px, which is enough for 8 pieces).
			</p>
			<h4>Recent News</h4>
			<p>This component is operated by jCarousel, its orientation is
				vertical.</p>
			<p>
				In css/master.css file, this is styled as <strong class="green">.carousel-vert4</strong>
			</p>
			<h4>Testimonials</h4>
			<p>
				This component (<strong class="green">#quotes</strong>) is operated
				similarly to the slider, by the Cycle plugin.
			</p>
			<p>
				In css/master.css file, this is styled as <strong class="green">.quote</strong>
			</p>
			<h4>Clients</h4>
			<p>This component is operated by jCarousel, you can change the
				automatic movement timing (interval) in the script at the end of
				index.html file.</p>
			<p>
				In css/master.css file, this is styled as <strong class="green">.carousel7</strong>
			</p>
			<p>The client logo image should have maximum width of 160px and
				maximum height of 150px.</p>
		</div>
		<div class="tab tab8">
			<h3>Columns in footer</h3>
			<p>
				Each <strong class="green">.footerbox</strong> takes up 1/4 of
				content space. It's basically up to you what you put in it. The
				newsletter sign-up form is just an example, it is not functioning.
				If you're using Mailchimp for your subscriptions, I recommend <a
					href="http://kb.mailchimp.com/article/can-i-host-my-own-sign-up-forms"
					target="_blank">this article</a>.
			</p>
			<p>
				If you want to have a 3-column footer instead, go to css/master.css
				and locate line <em>.footerbox</em>. Change the width to 30%.
			</p>
			<p>
				Make sure that the last .footerbox has class <strong class="green">.last</strong>:
			</p>
			<div class="greybox">
				<pre>&lt;div class="footerbox last"&gt;</pre>
			</div>
		</div>
		<div class="tab tab9">
			<h3>Setting up layouts and sidebar for pages</h3>
			<p>
				Page layout are easy. You have 3 of them to your disposal (each are
				represented as a <strong>body class</strong>):
			</p>
			<ul>
				<li><strong class="green">.full</strong> - page with no sidebar</li>
				<li><strong class="green">.right-sidebar</strong> - content on
					the left, sidebar floating on the right</li>
				<li><strong class="green">.left-sidebar</strong> - content on
					the right, sidebar floating on the left</li>
			</ul>
			<div class="greybox">
				<pre>
&lt;body class="left-sidebar"&gt;
	&lt;div id="content"&gt; CONTENT &lt;/div&gt;
	&lt;aside id="sidebar"&gt; SIDEBAR &lt;/aside&gt;
&lt;/body&gt;
						</pre>
			</div>
			<p>
				Each component in the sidebar is encapsulated in <strong
					class="green">.widget</strong> element.
			</p>
		</div>
		<div class="tab tab10">
			<h3>Setting up portfolio</h3>
			<p>
				Portfolio is operated by the <a href="http://mixitup.io/‎"
					target="_blank">Mixitup plugin</a>, which handles its filtering.
			</p>
			<p>Code nessessery to create a category menu:</p>
			<div class="greybox">
				<pre>
&lt;ul id="menu-portfolio-items" class="tags"&gt;
	&lt;li&gt;&lt;a href="#" data-filter="all" class="active"&gt;All&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#" data-filter="cat-1"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
					</pre>
			</div>
			<p>
				The <strong class="green">.gallery</strong> has many <strong
					class="green">.gallery-item</strong>s and these gallery items sit
				in <strong class="green">.gallery-row</strong>s.
			</p>
			<p>
				If you want 4-column gallery, make sure that each .gallery-item has
				class <strong class="green">.col-4</strong> and that there are
				exactly 4 gallery items in each gallery row.
			</p>
			<p>
				Similarly, 3-column gallery will have gallery items with class <strong
					class="green">.col-3</strong> and there will be exactly 3 gallery
				items in each gallery row.
			</p>
			<p>
				Each gallery item has <strong>categories as classes</strong> for
				filtering, make sure they correspond with the <em>data-filter</em>
				attributes in the category menu.
			</p>
			<div class="greybox">
				<pre>
&lt;div class="gallery"&gt;
	&lt;div class="gallery-row"&gt;
		&lt;dl class="gallery-item col-NUMBER CATEGORY"&gt;
			&lt;dt class="gallery-icon"&gt;
				&lt;a href="LARGE IMAGE"&gt;&lt;img src="THUMBNAIL IMAGE" alt="" /&gt;&lt;/a&gt;
			&lt;/dt&gt;
			&lt;dd class="gallery-caption"&gt;
				&lt;strong&gt;HEADING&lt;/strong&gt; 
				&lt;span class="small"&gt;DESCRIPTION OR CATEGORIES&lt;/span&gt;
			&lt;/dd&gt;
		&lt;/dl&gt;
	&lt;/div&gt;
&lt;/div&gt;
					</pre>
			</div>
			<p>Make sure the thumbnail images have the same width and height,
				ideally 480px in width.</p>
		</div>
		<div class="tab tab11">
			<h3>Setting up blog pages</h3>
			<p>Blog page consists of:</p>
			<ul>
				<li><strong class="green">article</strong> - one blog post</li>
				<li><strong class="green">.entry-header</strong>
					<ul>
						<li><strong class="green">.post-thumb</strong> - wide
							thumbnail</li>
						<li><strong class="green">.entry-byline</strong> - meta info
							with author vcard</li>
					</ul></li>
				<li><strong class="green">.entry-summary</strong> - excerpt
					<ul>
						<li><strong class="green">h1</strong> - heading</li>
						<li><strong class="green">p</strong> - excerpt</li>
						<li><strong class="green">.entry-footer</strong> - meta info</li>
					</ul></li>
			</ul>
			<p>
				Choose the layout of the blog page by adding a <em>.left-sidebar</em>
				or <em>.right-sidebar</em> class to the body tag.
			</p>
			<p class="notice success">
				<strong>Tip:</strong> In the author's vcard, use your google plus
				account link - that way your page will appear in search results like
				this: <img src="imgs/result.gif" alt="Google search result" />
			</p>
		</div>
		<div class="tab tab12">
			<h3>Setting up contact page, map and contact form</h3>
			<p>
				Open the contact.html file and go to the bottom, where the map
				script is. Here, fill the address <strong>twice</strong> (on two
				lines). Make sure that <a href="http://maps.google.com"
					target="_blank">maps.google.com</a> recognizes this address. You
				can play with the <em>zoom</em> property to get a perfect map
				granularity.
			</p>
			<p>
				All files needed for the contact form to work are in the /contact
				folder. Open the contact.php file and <strong>change the
					email address</strong> to yours. You can try the contact form, but first it
				has to be uploaded on a server with php.
			</p>
		</div>
		<div class="tab tab13">
			<h3>Creating your own color scheme</h3>
			<p>Each html file uses a colors-classic.css color scheme. There
				are more to your disposal in the /css folder. Take any you like the
				most and copy it. Keep it in the /css folder. Include the link to
				your newly created color scheme in the &lt;head&gt; section of your
				html files.</p>
			<p>The color scheme css file has only a couple colors. If you
				take a closer look, each section divided by comments has one color.
				So if you want to change blue for red, make sure you change the
				color hex code in the whole section.</p>
			<p>
				For a perfect color scheme with harmonious colors, I recommend <a
					href="http://colorschemedesigner.com/" target="_blank">colorschemedesigner.com</a>.
			</p>
		</div>

	</div>
	<!-- END .vertical-tabs -->

	<!-- END of WYSIWYG content _____________________________________________-->

</div>
<!-- END .content -->
